import { computed, createVNode, defineComponent, h } from 'vue';
import avatarImg from '@/assets/images/avatar.png';
// import screenImg from '@/assets/images/screen/nav-screen.png';
import {
  useCommonStore,
  usePermissionsStore,
  useTabViewsStore,
  useThemeStore,
  useUserStore,
} from '@/stores/modules';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
  Avatar,
  ConfigProvider,
  Dropdown,
  Flex,
  Layout,
  Menu,
  MenuItem,
  Modal,
} from 'ant-design-vue';
import type { ItemType } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { RouterLink, useRouter } from 'vue-router';
import SvgIcon from '@/components/SvgIcons/Index.vue';

export default defineComponent({
  name: 'layout-header',
  setup() {
    const permissionSore = usePermissionsStore();
    const { logout } = useUserStore();
    const { setCurrentNav } = permissionSore;
    const { menus, currentNav } = storeToRefs(permissionSore);
    const themeStore = useThemeStore();
    const tabViewsStore = useTabViewsStore();
    const commonStore = useCommonStore();

    const items = computed(() => {
      return menus.value.reduce<ItemType[]>((prev, item) => {
        if (item.meta?.hide) {
          return prev;
        }
        const data: ItemType = {
          key: item.path as string,
          label: h(
            RouterLink,
            { to: item.path },
            {
              default: () => {
                return (
                  <div class='h-full flex items-center justify-between font-bold'>
                    {item.meta?.icon && (
                      <SvgIcon
                        name={item.meta.icon}
                        class='w-5 h-5 mr-1'
                        color='undefined'
                        strokeColor='undefined'
                      />
                    )}
                    {item.meta?.title}
                  </div>
                );
              },
            },
          ),
          title: item.meta!.title as string,
        };
        prev.push(data);
        return prev;
      }, []);
    });
    const router = useRouter();
    const onOpenScreen = () => {
      const { href } = router.resolve('/screen');
      window.open(href, '_blank');
    };
    const onLogout = async () => {
      Modal.confirm({
        title: '系统提醒',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确认退出登录吗?',
        centered: true,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          logout();
        },
      });
    };
    return () => (
      <ConfigProvider
        theme={{
          ...themeStore.topHeaderTheme,
        }}
      >
        <Layout.Header
          class={`!px-[18px] menu-header ${tabViewsStore.hideTab ? 'hide-before' : ''}`}
        >
          <Flex align='center'>
            <div class='sys-name text-2xl font-bold w-1/6'>
              {commonStore.sysName}
            </div>
            <div class='flex-1 overflow-hidden'>
              <Menu
                class='!h-[55px]'
                selectedKeys={currentNav.value}
                mode='horizontal'
                items={items.value}
              />
            </div>
            {/* <div
              class='flex items-center cursor-pointer flex-col mr-5'
              onClick={() => onOpenScreen()}
            >
              <img src={screenImg} />
              <span class='leading-loose'>可视化大屏</span>
            </div> */}
            <Dropdown class='w-8'>
              {{
                default: () => (
                  <Avatar class='w-8 h-8' src={avatarImg}>
                    {' '}
                  </Avatar>
                ),
                overlay: () => (
                  <Menu>
                    <MenuItem key='personal'>
                      <RouterLink to='/personal'>个人中心</RouterLink>
                    </MenuItem>
                    <MenuItem key='logout' onClick={() => onLogout()}>
                      退出登录
                    </MenuItem>
                  </Menu>
                ),
              }}
            </Dropdown>
          </Flex>
        </Layout.Header>
      </ConfigProvider>
    );
  },
});
